<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"><script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>

<body>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<h2 class="card-title" style="padding-left:270px;">周二上午班</h2>
</nav>

<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home" role="tab" aria-controls="pills-home" aria-selected="true">学生</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile" role="tab" aria-controls="pills-profile" aria-selected="false">活动</a>
  </li>
 
</ul>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" style="padding-left:220px;">
<ul class="list-group list-group-horizontal">
  <li class="list-group-item">学生1</li>
  <li class="list-group-item">41911001</li>
  <li class="list-group-item">19金信</li>
</ul>
<ul class="list-group list-group-horizontal">
  <li class="list-group-item">学生1</li>
  <li class="list-group-item">41911001</li>
  <li class="list-group-item">19金信</li>
</ul>
<ul class="list-group list-group-horizontal">
  <li class="list-group-item">学生1</li>
  <li class="list-group-item">41911001</li>
  <li class="list-group-item">19金信</li>
</ul>
<ul class="list-group list-group-horizontal">
  <li class="list-group-item">学生1</li>
  <li class="list-group-item">41911001</li>
  <li class="list-group-item">19金信</li>
</ul>
  </div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
<div class="row">
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">吃饭</h5>
        <p class="card-text">未开始</p>
        <a href="#" class="btn btn-primary">查看详情</a>
      </div>
    </div>

  </div>
 
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">你画我猜</h5>
        <p class="card-text">未开始</p>
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  活动具体信息
</button>
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle">具体信息</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div style="padding-left:50px;padding-right:50px" >
  <table class="table table-bordered" >
  <tbody>
    <tr>
      <td >活动名称</td>
      <td >你画我猜</td>
    </tr>
    <tr>
      <td >活动规则</td>
      <td >一人通过肢体语言向队友传递词义，依次类推</td>
    </tr>
    <tr>
      <td>组队方式</td>
      <td >自由组队，每队不超7人</td>
    </tr>
     <tr>
      <td >活动开始时间</td>
      <td >2021-7-11 12:00</td>
    </tr>
     <tr>
      <td >活动截止时间</td>
      <td >2021-7-25 12:00</td>
    </tr>
  </tbody>
</table>
</style>
</div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>
      </div>
    </div>
  </div>
</div>



<div class="row">
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">吃饭</h5>
        <p class="card-text">进行中</p>
        <a href="#" class="btn btn-primary">查看详情</a>
      </div>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">睡觉</h5>
        <p class="card-text">已结束</p>
        <a href="#" class="btn btn-primary">查看详情</a>
      </div>
    </div>
  </div>
</div>
  </div>
 
</div>

</body>
</html>